<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册页面</title>
    <script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
    <script type="text/javascript" src="js/bootstrap.js" ></script>
    <link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<div class="container" style="width: 200px;margin-top: 100px " >
    <div style="margin-left:40px">
        <h1>请注册</h1>
    </div>
    <form role="form" class="form-horizontal" action="${pageContext.request.contextPath}/register" method="post" id="form1">
        <div class="form-group">
            <label>用户名</label>
            <p id="queMessage"></p>
            <input class="form-control" name="username" id="username"/>
        </div>
        <div class="form-group">
            <p id="pueMessage"></p>
            <label >密码</label>
            <input class="form-control" type="password" name="password" id="password"/>
        </div>
        <div class="form-group">
            <p id="repMessage"></p>
            <label >确认密码</label>
            <input class="form-control" type="password" name="password" id="rePassword"/>
        </div>
        <div class="form-group">
            <input class="form-control btn btn-success" type="submit" value="注册">
        </div>
        <div class="form-group">
            <a class="btn btn-info" style="width: 200px" href="index.jsp">返回</a>
        </div>
    </form>
</div>
</body>
</html>
<script>
    $(function () {
        $("#username").blur(function () {
            jqueryTest();
            // checkUsername();
        })
        $("#password").blur(function () {
            checkPassword();
        })
        $("#rePassword").blur(function () {
            rePassword();
        })
        $("#form1").submit(function () {
            return checkPassword()&&rePassword();
        })
    })
    function checkUsername() {
        let username = $("#username").val();
        let msg = $("#queMessage");
        if (username == null || username == ""){
            msg.html("用户名不能为空").css("color","red").css("font-size","12px");
            return false;
        }else if (username.length<4){
            msg.html("用户名长度不能小于4").css("color","red").css("font-size","12px");
        }
        else {
            msg.html("格式正确").css("color","green").css("font-size","12px");
            return true;
        }
    }
    function checkPassword() {
        let password = $("#password").val();
        let msg = $("#pueMessage");
        if (password == null || password == ""){
            msg.html("密码不能为空").css("color","red").css("font-size","12px");
            return false;
        }else if (password.length<6){
            msg.html("用户名长度不能小于6").css("color","red").css("font-size","12px");
        }else {
            msg.html("格式正确").css("color","green").css("font-size","12px");
            return true;
        }
    }
    function rePassword() {
        let rePassword = $("#rePassword").val();
        let password = $("#password").val();
        let msg = $("#repMessage");
        if (rePassword != password){
            msg.html("两次密码不一样").css("color","red").css("font-size","12px");
            return false;
        }else {
            msg.html("密码符合").css("color","green").css("font-size","12px");
            return true;
        }
    }
    function jqueryTest() {
        let username = $("#username").val();
        $.ajax({
            url:"${pageContext.request.contextPath}/testuname",
            data:"username="+username,
            type:"get",
            dataType:"json",
            success:function (rs) {
                console.log(rs.username);
                if (rs.username != undefined){
                    $("#queMessage").html("账户已被注册").css("color","red").css("font-size","12px");
                    return false;
                }
                else {
                    $("#queMessage").html("账户可用").css("color","green").css("font-size","12px");
                    return true;
                }
            }
        })
    }
</script>